<template>
  <div>
    <el-row :gutter="20">
      <el-col v-for="src in srcs" :span="6" style="margin-top: 20px">
        <el-image :src="src" style="width: 350px; height: 240px"></el-image>
      </el-col>
    </el-row>
    <el-upload
      class="upload-demo"
      show-file-list="flase"
      :action="'http://localhost:8080//bizhotel/itrip-hotel/uploadHotelPicture?module=hotel&hotelId='+hotelId"
      :on-success="handleHotelPicSuccess"
      :before-upload="beforeHotelPicUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过1m
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      srcs: [],
      hotelId:'',
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.hotelId=this.$route.params.id;
      this.$axios
        .get(
          `http://localhost:8080/bizhotel/itrip-hotel/getHotelPictures/${this.$route.params.id}`
        )
        .then((res) => {
          this.srcs = res.data.data.urls;
        });
    },
    handleHotelPicSuccess: function (res, file) {
      // 强制重新渲染
      this.load();
      this.$message.success("图片上传成功！");
    },
    beforeHotelPicUpload: function (file) {
        console.log(file.type);
      const isJPGorPNG = (file.type === "image/jpeg"||file.type ==="image/png");
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isJPGorPNG) {
        this.$message.error("上传图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过1MB!");
      }
      return isJPGorPNG && isLt1M;
    },
  },
};
</script>

<style>
</style>